<script setup>
	import { ref } from "vue";
	import SongItemProp from "@/const/SongItemProp.js";

	const isLike = ref(false);
	const props = defineProps({
		...SongItemProp,
	});

	const commonIconAttr = {
		size: "17",
		color: "#fff",
	};
	const loopIconAttr = {
		...commonIconAttr,
		type: "redo-filled",
	};
	const downloadIconAttr = {
		...commonIconAttr,
		type: "download-filled",
	};
	const likeIconAttr = {
		...commonIconAttr,
		type: "heart-filled",
	};
</script>

<template>
	<view class="song-info-share">
		<view class="info">
			<view class="name">{{ props.name }}</view>
			<view class="singer">{{ props.singer }}</view>
		</view>
		<view class="share">
			<uni-icons class="icon-mr" v-bind="loopIconAttr" />
			<uni-icons class="icon-mr" v-bind="downloadIconAttr" />
			<uni-icons
				class="icon-mr"
				v-bind="likeIconAttr"
				:color="isLike ? 'red' : '#fff'"
				@click="isLike = !isLike"
			/>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.song-info-share {
		display: flex;
		width: 100%;
		color: #fff;
		justify-content: space-between;
	}

	.name {
		font-size: 18px;
	}

	.singer {
		font-size: 10px;
	}

	.icon-mr {
		margin-right: 26px;
	}
</style>
